<!--
 * @Author: 清羽
 * @Date: 2022-09-06 20:37:43
 * @LastEditTime: 2022-09-08 10:35:32
 * @LastEditors: you name
 * @Description: 
-->
<!-- list 页 -->
<template>
  <div class="app-container">
    <el-table
      :data="productList"
      border
      style="width: 100%"
      :default-sort="{prop: 'created_at', order: 'descending'}"
      v-loading="formLoading"
    >

      <el-table-column
        width="140"
        prop="created_at"
        sortable
      >
        <template slot="header">
          <span>创建时间</span>
        </template>
        <template slot-scope="scope">
          <span>{{scope.row.created_at | formatDate}}</span>
        </template>
      </el-table-column>
      <!-- 创建时间end -->

      <el-table-column
        prop="business.company_name"
        min-width="180"
      >
        <template
          slot="header"
          slot-scope="scope"
        >
          <el-row>
            <el-col :span="12">
              店铺名称
            </el-col>
            <el-col :span="10">
              <el-input
                size="mini"
                v-model="keyword.businessName"
                placeholder="搜索店铺名称"
                prefix-icon="el-icon-search"
                @change="searchBusinessName"
              />
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <!-- 店铺名称end -->

      <el-table-column
        min-width="360"
        label="商品名称"
        prop="name"
        filter-placement="bottom-end"
        :filters="filterNameArr"
        :filter-multiple="false"
        :filter-method="filterProductName"
      >
        <!-- label="商品名称"
        :column-key="'name'"
        :filters="[{text:'完善的商品',value:1},{text:'未完善的商品',value:0}]"
        :filter-method="filterName"
        :filter-multiple="false" -->
        <template
          slot="header"
          slot-scope="scope"
        >

          <el-tooltip placement="top">
            <div slot="content">商品名称</div>
            <span>商品名称
              <!-- <i class="el-icon-search" /> -->
            </span>
          </el-tooltip>
          <el-input
            ref="input"
            size="mini"
            v-model="keyword.productName"
            placeholder="搜索商品名称"
            prefix-icon="el-icon-search"
            @change="searchProductName"
            @focus="forbid"
          />
          <!-- <el-row>
            <el-col :span="12">

              
            </el-col>

            <el-col :span="10">
              
            </el-col>

          </el-row> -->

        </template>

        <!-- <template
          slot="header"
          slot-scope="scope"
        >
          <el-popover
            placement="bottom"
            title=""
            width="200"
            trigger="click"
          >
            <div
              slot="reference"
              class="search-header"
            >
              <span class="search-title">商品名称：</span>
              <span class="iconCss"><i class="el-icon-search" /></span>
            </div>
            <el-checkbox-group v-model="filterName">
              <el-checkbox
                v-for="item in filterName"
                :value="item.value"
                :label="item.text"
                :key="item.value"
              >
                {{ item.text }}
              </el-checkbox>
            </el-checkbox-group>
            <el-button
              size="mini"
              @click="filterProductName(scope)"
            >筛选</el-button>
            <el-button
              size="mini"
              @click="reset(headerIndex)"
            >重置</el-button>
          </el-popover>
        </template> -->

        <template slot-scope="scope">
          <el-row>
            <el-col :span="20">
              <div>
                {{scope.row.name}}
              </div>
            </el-col>
            <el-col :span="4">
              <div
                style="color:#F56C6C ;"
                v-if="scope.row.business_cate_id == null || scope.row.cate_id == null || scope.row.image == null || scope.row.slider_image == null || scope.row.unit == null || scope.row.postage == null ||!scope.row.slider_image[0]"
              ><i class="el-icon-warning-outline" /> 商品信息未完善</div>
            </el-col>
          </el-row>

        </template>
      </el-table-column>
      <!-- 商品名称end -->

      <el-table-column
        prop="cate_id.cateName"
        label="所属商城分类"
        min-width="180"
      >
      </el-table-column>
      <!-- 所属商城分类end -->

      <el-table-column
        label="删除状态"
        width="110"
        align="center"
        prop="is_del"
        :filters="[{text:'已删除',value:1},{text:'未删除',value:0}]"
        :filter-method="filterDel"
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row.is_del==1?'danger':''">
            {{scope.row.is_del==1?'已删除':'未删除'}}
          </el-tag>
        </template>
      </el-table-column>
      <!-- 删除状态end -->

      <el-table-column
        class-name="status-col"
        align="center"
        label="上架状态"
        width="110px"
        prop="is_show"
        :filters="[{text:'未上架',value:0},{text:'已上架',value:1}]"
        :filter-method="filterShow"
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row.is_show==0?'info':'success'">
            {{scope.row.is_show==0?'未上架':'已上架'}}
          </el-tag>
        </template>
      </el-table-column>
      <!-- 上架状态end -->

      <el-table-column
        class-name="status-col"
        align="center"
        label="审核状态"
        width="110px"
        prop="is_check"
        :filters="[{ text: '待审核', value: 0 }, { text: '审核通过', value: 1 },{ text: '审核失败', value: 2 },{ text: '未提交审核',value:null}]"
        :filter-method="filterCheck"
      >
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.is_check==null?'warning':(scope.row.is_check==0?'info':(scope.row.is_check==1?'success':(scope.row.is_check==2?'danger':'warning')))"
          >
            {{scope.row.is_check==null?'未提交审核':(scope.row.is_check==0?'待审核':(scope.row.is_check==1?'审核通过':(scope.row.is_check==2?'审核不通过':"错误")))}}
          </el-tag>
        </template>
      </el-table-column>
      <!-- 审核状态end -->

      <el-table-column
        align="center"
        label="操作"
        width="120"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            icon="el-icon-edit"
            @click="openInfo(scope.row._id)"
          >编辑</el-button>

          <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="80%"
            :before-close="handleClose"
          >

            <el-dialog
              width="30%"
              title="申请失败详情"
              :visible.sync="notInputVisible"
              append-to-body
              :before-close="sublevelHandleClose"
            >
              <el-input
                v-model="checkNoInput"
                placeholder="请输入申请失败详情"
              ></el-input>
              <span
                slot="footer"
                class="dialog-footer"
              >
                <el-button @click="checkNot()">
                  确定
                </el-button>
              </span>
            </el-dialog>
            <!-- 审核失败详情--弹窗--end -->

            <el-dialog
              width="30%"
              title="下架详情"
              :visible.sync="stateInfoVisible"
              append-to-body
              :before-close="sublevelHandleClose"
            >
              <el-input
                v-model="stateInfoInput"
                placeholder="请输入下架详情"
              ></el-input>
              <span
                slot="footer"
                class="dialog-footer"
              >
                <el-button @click="downStockProduct()">
                  确定
                </el-button>
              </span>

            </el-dialog>
            <!-- 下架详情--弹窗--end -->

            <ProductInfo
              v-loading="productInfoLoading"
              :info.sync="productInfo"
              :value="productFromValue"
              :group="productFromGroup"
              :image="productInfoSliderImage"
              :fiex_group="fixedFromGroup"
              :fiex_value="fixedFromValue"
            />
            <!-- 商品详情end -->

            <span
              slot="footer"
              class="dialog-footer"
            >
              <el-button
                type="success"
                @click="checkSuccess()"
              >审核通过
              </el-button>
              <el-button
                type="warning"
                @click="notInputVisible=true"
              >审核不通过
              </el-button>
              <el-button
                type="danger"
                @click="stateInfoVisible=true"
              >商品下架</el-button>
              <el-button @click="dialogVisible = false">取 消</el-button>
              <!-- <el-button
                type="primary"
                @click="dialogVisible = false"
              >确 定</el-button> -->
            </span>
            <!-- 底部button end -->

          </el-dialog>
        </template>
      </el-table-column>

    </el-table>
    <!-- 商品列表end -->

  </div>
</template>

<script>
import ProductInfo from './components/ProductInfo.vue'
export default {
  name: "list",
  data () {
    return {
      keyword: {
        productName: '', //商品名称关键字  --查询 
        businessName: '',
      },
      params: {},
      productList: [],
      formLoading: false,
      dialogVisible: false,
      notInputVisible: false,
      stateInfoVisible: false,
      checkNoInput: '',
      stateInfoInput: '',
      productInfo: null,
      productFromValue: [],
      productInfoSliderImage: [],
      productFromGroup: [],
      fixedFromGroup: [],
      fixedFromValue: [],
      productInfoLoading: false,
      productId: null,
      filterNameArr: [{ text: '完善的商品', value: 1 }, { text: '未完善的商品', value: 0 }]
    }
  },
  filters: {
    formatDate: function (value) {
      const date = new Date(value)
      const y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? '0' + MM : MM
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      let h = date.getHours()
      h = h < 10 ? '0' + h : h
      let m = date.getMinutes()
      m = m < 10 ? '0' + m : m
      let s = date.getSeconds()
      s = s < 10 ? '0' + s : s
      return y + '-' + MM + '-' + d + ' ' + h + ':' + m
    }
  },
  components: { ProductInfo },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {
    this.getProductList()
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  },
  // 函数
  methods: {
    reset () { },
    getProductList (param) { // 获取商品列表
      this.formLoading = true
      this.$api.product.getProductList(param).then(response => {
        console.log("this.$api.product.getProductList => response", response.data)
        this.productList = response.data
        this.formLoading = false
      })
    },

    openInfo (value) { // 打开商品详情
      this.productId = value
      this.productInfoLoading = true
      this.$api.product.getProductInfo(value).then(res => {
        this.productInfo = res.data
        this.productFromValue = res.fromValue
        this.productFromGroup = res.fromGroup
        this.fixedFromGroup = res.fixedFromGroup
        this.fixedFromValue = res.fixedFromValue
        for (const i in this.productInfo.slider_image) { // 获取商品轮播图
          this.productInfoSliderImage[i] = this.imgUrls + this.productInfo.slider_image[i].img_url
        }
        this.productInfoLoading = false
      })
      this.dialogVisible = true

    },

    handleClose (done) {  // 处理商品详情弹窗关闭
      this.$confirm('确认关闭？')
        .then(_ => {
          this.getProductList()
          this.productId = null
          done()
        })
        .catch(_ => { })
    },

    sublevelHandleClose (done) {  // 处理子级弹窗关闭
      this.$confirm('确认关闭？')
        .then(_ => {
          this.checkNoInput = ''
          this.stateInfoInput = ''
          done()
        })
        .catch(_ => { })
    },

    searchProductName () { // 搜索商品名称
      this.getProductList(this.keyword)
    },

    searchBusinessName () { // 搜索店铺名称
      this.getProductList(this.keyword)
    },

    forbid () {
      // $(document).ready(function () {
      //   var myClass = $(".el-table-filter");              //获取DOM元素
      //   // myClass.css("background-color","#C50210"); //为选取的DOM元素设置背景颜色
      //   // myClass.css("color","#FFF");               //为选取的DOM元素设置文字颜色
      //   console.log("forbid => myClass", myClass)
      // });

      // var myClass = document.querySelectorAll(".el-table-filter")
      // myClass[0].style.display = "none"
      // myClass[0].style.fontSize = "24rem"
      // console.log("forbid => myClass", myClass[0].style)
    },

    checkSuccess () { // 审核通过
      this.$api.product.submitProductCheckSuccess(this.productId).then(response => {
        this.$message({
          type: 'success',
          message: response.msg
        })
        this.productId = null
        this.dialogVisible = false
        this.getProductList()
      })
    },

    checkNot () { // 审核不通过
      const data = { stateInfo: this.checkNoInput }
      this.$api.product.submitProductCheckNot(this.productId, data).then(response => {
        this.$message({
          type: 'success',
          message: response.msg
        })
        this.productId = null
        this.dialogVisible = false
      })
      this.notInputVisible = false
      this.checkNoInput = ''
      this.getProductList()
    },

    downStockProduct () { // 下架商品
      const data = { stateInfo: this.stateInfoInput }
      this.$api.product.downStockProduct(this.productId, data).then(response => {
        this.$message({
          type: 'success',
          message: response.msg
        })
        this.productId = null
        this.dialogVisible = false
      })
      this.stateInfoVisible = false
      this.getProductList()

    },
    filterCheck (value, row) { // 过滤审核状态
      return row.is_check === value
    },
    filterShow (value, row) { // 过滤上架状态
      return row.is_show === value
    },
    filterDel (value, row) {  // 过滤删除状态
      return row.is_del === value
    },
    filterProductName (value, row) { // 过滤商品详情是否完善
      console.log("filterProductName => value", value)
      console.log("filterProductName => row", row)
      if (value == 1) { // 完善的商品
        return row.slider_image.length > 0 && row.image !== null && row.postage !== null && row.unit !== null && row.business_cate_id !== null && row.cate_id !== null
      } else { // 未完善的商品
        return row.business_cate_id == undefined || row.cate_id == undefined || row.image == undefined || row.slider_image == undefined || row.unit == undefined || row.postage == undefined || !row.slider_image[0]
      }


    },
    filterChange (filters) {
      console.log("filterChange => filters", filters)

    }
  }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.app-container {
}

::v-deep .el-table {
  th:nth-child(3) {
    .cell {
      display: grid;
      grid-template-columns: 0.2fr 0.1fr 1fr;
      // grid-template-areas: 'el-tooltip el-table__column-filter-trigger el-input'; /* 两行 三列 */
      .el-tooltip {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
        align-self: center;
      }
      .el-table__column-filter-trigger {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
      }
      .el-input {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 2;
      }
      .el-input__inner {
        z-index: 200;
      }
    }
    .el-icon-arrow-down:before {
      // font-family: 'iconfont' !important;
      // -webkit-font-smoothing: antialiased;
      // -moz-osx-font-smoothing: grayscale;
      // font-size: 24px;
      // font-style: normal;
      // content: '\e63f';
    }
  }
}

::v-deep .el-table-filter {
  display: none;
}

.container .el-icon-arrow:before {
  font-family: 'iconfont' !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 24px;
  font-style: normal;
  content: '\e62e';
}
</style>